import React, { useCallback, useMemo, useRef, useState } from "react";
import styled from 'styled-components';
import { Select, Tooltip } from '@arco-design/web-react';

import CommonCard from "@/components/CommonCard/CommonCard";
import Schumann from "./Schumann/Schumann";
import Magnetic from "./Magnetic/Magnetic";
import ContentCard from "@/components/ContentCard/ContentCard";
import { IconQuestionCircle } from "@arco-design/web-react/icon";
import JSMapCharts from "@/components/LineCharts/JSMapCharts";

const Wrapper = styled.div`
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgb(54, 54, 54);
    padding: 16px;

    .tip {
        font-size: 12px;
    }
`;

const RealTimeMoniter = () => {

    const ref = useRef<any>(null);
    const [ option, setOption ] = useState<'schumann' | 'magnetic'>('schumann');
    const [ area, setArea ] = useState<string>('南京市');

    const options = {
        schumann: {
            title: '舒曼谐振',
            value: 'schumann',
            component: <Schumann area={area}/>,
        },
        magnetic: {
            title: '电磁扰动',
            value: 'magnetic',
            component: <Magnetic area={area}/>,
        },
    }

    const onAreaSelected = (location: string) => {
        setArea(location);
    }

    const onChange = useCallback((value) => {
        setOption(value);
    }, [])

    return (
        <Wrapper>
            <CommonCard
                id="realTimeMoniter"
                title="数据监测"
                titleRight={
                    <Select
                        ref={ref}
                        placeholder='请选择数据类型'
                        style={{ width: 200, }}
                        defaultValue={option}
                        onChange={onChange}
                        value={option}
                        getPopupContainer={() => document.querySelector('#realTimeMoniter')!}
                    >
                        {
                            Object.keys(options).map((key) => (
                                <Select.Option key={key} value={options[key].value}>
                                    {options[key].title}
                                </Select.Option>
                            ))
                        }
                    </Select>
                }
            >
                {
                    option === 'schumann' ?
                    <ContentCard
                        style={{ width: '100%' }}
                        title={<span>
                                <Tooltip content="此处展示的是有数据的台站，点击台站地域进行数据展示。">
                                    <IconQuestionCircle style={{ marginRight: '4px' }}/> 
                                </Tooltip>
                                地区选择
                        </span>}
                    >
                        <JSMapCharts id='jsmap' onAreaClick={onAreaSelected}/>
                    </ContentCard> : null
                }
                {
                    options[option].component
                }
            </CommonCard>
        </Wrapper>
    )
}


export default RealTimeMoniter;